<template>
  <view class="sort1">
    <view class="sort1-top">
      <view class="back" @click="back">
        <image src="/static/返回.png" mode=""></image>
      </view>
      <!-- 搜索框 -->
      <view class="serach">
        <image src="/static/返回1.png" mode=""></image>
        <u-search placeholder="阳澄湖大闸蟹" :show-action="false" :animation="false">
        </u-search>
        <button class="btn">搜索</button>
      </view>
      <view class="sort1-content">
        <view class="left">
          满减优惠
        </view>
        <view class="center">
          再买69.2可享用
        </view>
        <view class="right">
          满79减10
        </view>
      </view>
    </view>
    <view class="fenlei">
      <view class="fenlei1">
        <view class="fenlei1-content">
          全部分类
        </view>
        <image src="/static/21.png" mode=""></image>
      </view>
      <view class="fenlei2">
        <view class="fenlei2-content">
          销量
        </view>
        <image src="/static/21.png" mode=""></image>
      </view>
      <view class="fenlei2">
        <view class="fenlei2-content">
          价格
        </view>
        <image src="/static/21.png" mode=""></image>
      </view>
    </view>
    <view class="zujian">
      <view class="for">
        <view v-for="(item,index) in content" :key="index" class="for-box">
          <contboxVue :title1="item.title1" :imageurl="item.imageurl" :title2="item.title2" :title3="item.title3"
            :title4="item.title4" :title6="item.title6" :title7="item.title7" :title5="item.title5"
            :title9="item.title9" :title8="item.title8">
          </contboxVue>
        </view>
      </view>
    </view>
    <button class="btn1" @click="nav">前往购物车</button>
  </view>
</template>

<script>
  import contboxVue from '../compoents/contbox/contbox.vue'
  export default {
    components: {
      contboxVue
    },
    data() {
      return {
        content: [{
            imageurl: '/static/bun.png',
            title1: '江苏无锡香菇猪肉包',
            title2: '猪肉肥美',
            title3: '鲜甜软嫩',
            title4: '多汁美味',
            title5: '多汁香嫩',
            title6: '8.79',
            title7: '笼',
            title9: '劵',
            title8: '减10元'
          },
          {
            imageurl: '/static/broccoli.png',
            title1: '浙江临海西兰花',
            title2: '基地自供',
            title3: '绿色培植',
            title4: '新鲜采摘',
            title5: '绿色新鲜',
            title6: '4.79',
            title7: '斤'
          },
          {
            imageurl: '/static/tomato.png',
            title1: '云南高山大西红柿',
            title2: '鲜嫩多汁',
            title3: '软甜爽口',
            title4: '入口美味',
            title5: '美味多汁',
            title6: '2.44',
            title7: '斤'
          },
          {
            imageurl: '/static/potato.png',
            title1: '宁夏西吉县马铃薯',
            title2: '基地自供',
            title3: '绿色培植',
            title4: '新鲜采摘',
            title5: '绿色新鲜',
            title6: '3.21',
            title7: '斤'
          }
        ]
      }
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      nav() {
        uni.switchTab({
          url: '/pages/tabber/cart/cart'
        })
      }
    }
  }
</script>

<style lang="scss">
  .sort1 {
    .sort1-top {
      background: linear-gradient(to bottom, #cbf1dc, #f6fcf9);

      .back {
        padding-top: 60rpx;
        width: 90%;
        margin: auto;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .serach {
        width: 90%;
        margin: auto;
        padding-top: 30rpx;
        position: relative;
        display: flex;

        image {
          // color: #49ba7c;
          top: 10rpx;
          width: 40rpx;
          height: 40rpx;
        }

        .btn {
          background-color: #49ba7c;
          color: white;
          width: 150rpx;
          height: 50rpx;
          line-height: 50rpx;
          position: absolute;
          top: 36rpx;
          right: 10rpx;
          border-radius: 50px;
          font-size: 25rpx;
        }
      }

      .sort1-content {
        display: flex;
        width: 90%;
        margin: auto;
        margin-top: 30rpx;
        background-color: #ffffff;
        height: 60rpx;
        line-height: 60rpx;
        padding: 10rpx;

        .left {
          color: #e68c75;
          background-color: #fed5d2;
          height: 40rpx;
          line-height: 40rpx;
          font-size: 26rpx;
          width: 120rpx;
          margin-top: 10rpx;
          text-align: center;

          // padding: 5rpx;
          .swipe {
            background-color: #fafafa;

            scroll-view {
              view:hover {
                color: #3eb874;
              }

            }
          }
        }

        .center {
          margin-left: 60rpx;
        }

        .right {
          margin-left: 60rpx;
        }
      }
    }

    .fenlei {
      display: flex;
      justify-content: space-around;
      margin-top: 20rpx;

      .fenlei1,
      .fenlei2,
      .fenlei3 {
        display: flex;
        font-weight: bold;
      }

      image {
        width: 30rpx;
        height: 50rpx;
      }
    }

    .zujian {
      width: 90%;
      margin: auto;

      .for {
        margin-top: 10px;
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;

        .for-box {
          width: 48%;
          margin-top: 40rpx;
        }
      }
    }

    .btn1 {
      width: 90%;
      margin: auto;
      margin-bottom: 40px;
      background-color: #79d8a3;
      color: #fff;
      margin-top: 40rpx;
      border-radius: 10px;
    }
  }
</style>